<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">员工管理</span>
                </div>

                <div slot="right" @click="addStaff">
                    <i class="add-icon"></i>
                    <span class="title">添加</span>
                </div>
            </van-nav-bar>
        </div>

        <!--员工列表-->
        <div class="module-box item-box" v-for="(item,index) in staffList" :key="index" v-if="staffList.length">
            <div class="info">
                <div>
                    <span class="name">{{item.staffName}}</span>
                    <span>{{item.site=='staff'?'保安':'物业经理'}}</span>
                    <!--<span class="active">已激活</span>-->
                    <!--<span class="notActive">未激活</span>-->
                </div>

                <div class="phone">{{item.phoneNumber}}</div>
            </div>
            <!--<van-button class="mod-btn" size="small" color="#ededed" @click="showPopup(item)">修改</van-button>-->
        </div>
        <van-dialog v-model="showDialogModal" title="员工信息修改" @confirm="submitStaffInfo" show-cancel-button>
            <van-cell-group>
                <van-field label="姓名" :value="currnStaff.staffName" readonly/>
                <van-field label="职位">
                    <van-radio-group v-model="currnStaff.site" slot="input">
                        <van-radio name="保安">保安</van-radio>
                        <van-radio name="物业经理">物业经理</van-radio>
                    </van-radio-group>
                </van-field>
            </van-cell-group>
        </van-dialog>
        <van-dialog v-model="showNewStaffPosition" title="新员工职位选择" @confirm="addStaffInfo" show-cancel-button>
            <van-cell-group>
                <van-field label="姓名" :value="newStaffInfo.personName" readonly/>
                <van-field label="职位">
                    <van-radio-group v-model="newStaffPositon" slot="input">
                        <van-radio name="staff">保安</van-radio>
                        <van-radio name="Manage">物业经理</van-radio>
                    </van-radio-group>
                </van-field>
            </van-cell-group>
        </van-dialog>
    </div>
</template>

<script>
    import wx from 'weixin-js-sdk'
    import {NavBar,Field,Button,Dialog,RadioGroup,Radio,CellGroup} from 'vant';

    export default {
        name: 'staffManage',

        components: {
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Field.name]: Field,
            [Button.name]: Button,
            [Dialog.Component.name]: Dialog.Component,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
        },

        props: {},

        data() {
            return {
                staffList:[],
                showDialogModal:false,
                showNewStaffPosition:false,
                currnStaff:{
                    staffName:'',
                    site:'',
                },
                newStaffPositon:'staff',
                wxDate:{},
                newStaffInfo: {},
            }
        },

        mounted() {
            this.getStaffData()
        },

        methods: {
            //查询员工列表
            getStaffData(){
                this.$axios.post(this.$api.queryCommunityDetail,{
                    communityId:this.$Cookies.get('communityId'),
                })
                    .then(success=>{
                        let staffData=success.data.data.employeeInfoRspDTOS
                        for(let item of staffData.Manage){
                            item.site='Manage'
                        }
                        for(let item of staffData.staff){
                            item.site='staff'
                        }
                        this.staffList=staffData.Manage.concat(staffData.staff)
                    })
                    .catch(error=>{
                        console.log(error.data.data)
                    })
            },
            onClickLeft(){
                this.$router.go(-1);
            },
            //修改员工信息弹窗
            showPopup(item){
                this.showDialogModal=true
                this.currnStaff=JSON.parse(JSON.stringify(item))
                console.log(this.currnStaff)
            },
            //提交员工修改信息
            submitStaffInfo(){
                this.$axios.post(this.$api.updateEmployee,{

                })
                    .then(success=>{
                        console.log(success.data)
                    })
                    .catch(error=>{
                        console.log(error.data.data)
                    })
            },
            //扫一扫添加员工
            addStaff(){
                this.$axios.post(this.$api.getWxSignature,{
                    url: window.location.href.split('#')[0],
                })
                    .then(success => {
                        this.wxDate = success.data.data;
                        this.wxScan();
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            //扫一扫
            wxScan(){
				let that = this;

                wx.config({
                    debug: false,
                    appId: this.wxDate.appId,        // 必填,公众号的唯一标识
                    timestamp: this.wxDate.timestamp, // 必填,生成签名的时间戳
                    nonceStr: this.wxDate.noncestr, // 必填,生成签名的随机串
                    signature: this.wxDate.signature, // 必填,签名
                    jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
                });

                wx.ready(function () {
                    // 判断当前客户端版本是否支持指定JS接口
                    wx.checkJsApi({
                        jsApiList: [
                            'scanQRCode'
                        ],
                        success: function (res) {
                            // 以键值对的形式返回，可用true，不可用false
                            if (res.checkResult.scanQRCode === true) {
                                wx.scanQRCode({
                                    desc: 'scanQRCode desc',
                                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                                    scanType: ['qrCode', 'barCode'],  // 可以指定扫二维码还是一维码，默认二者都有
                                    success: function (res) {
                                        let getCode = decodeURI(res.resultStr);
                                        that.newStaffInfo = JSON.parse(getCode);
										that.showNewStaffPosition=true;

                                    }
                                })
                            } else {
                                Dialog({
                                    message:'抱歉，当前客户端版本不支持扫一扫'
                                });

                            }
                        },
                        fail: function (res) { // 检测getNetworkType该功能失败时处理
                            Dialog({
                                message:`失败，原因：${success.data.msg}`
                            });
                        }
                    })
                });

                /* 处理失败验证 */
                wx.error(function (res) {
                    Dialog({
                        message:'配置验证失败: ' + res.errMsg
                    });

                })
            },
            //提交新员工职位
            addStaffInfo(){
                this.addNewStaff()
            },
            //新增员工
            addNewStaff(){
                let params={
                    phoneNumber:this.newStaffInfo.personPhone,
                    createStaff:this.$Cookies.get('personName'),
                    position:this.newStaffPositon,
                    communityId:this.$Cookies.get('communityId'),
                }
                if(this.newStaffPositon=='staff'){
                    params.staffName=this.newStaffInfo.personName
                }
                if(this.newStaffPositon=='Manage'){
                    params.managerName=this.newStaffInfo.personName
                }
                this.$axios.post(this.$api.insertEmployee,params).then(success=>{
                    if(success.data.code=='200'){
                        this.getStaffData()
                    }
                }).catch(error=>{
                    console.log(error)
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .add-icon{
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url("../assets/images/add-icon.png") no-repeat;
        background-size: cover;
        vertical-align: middle;
    }
    .item-box{
        padding: 12px 16px;

        .info{
            display: inline-block;
            font-size: 16px;
            color: #222222;

            .phone{
                margin-top: 10px;
            }

            .name{
                margin-right: 10px;
            }

            .active{
                padding: 2px 4px;
                border: solid 1px #61dda3;
                color: #61dda3;
                font-size: 12px;
                margin: 0;
                border-radius: 4px;
            }
            .notActive{
                padding: 2px 4px;
                border: solid 1px #e90b0b;
                color: #e90b0b;
                font-size: 12px;
                margin: 0;
                border-radius: 4px;
            }
        }
        .mod-btn{
            float: right;
            margin-top: 10px;

            .van-button__text{
                font-size: 14px;
                color: #666666;
            }
        }
    }
    .dialog-staff{
        padding: 0 20px;
    }
    .van-radio{
        /*float: left;*/
        /*width: 40%;*/
        margin: 5px ;
    }
</style>

